<template>
	<view>
		<view class="robotMessage" > <!-- :class="{'item-hide':  !(item.leftStatus &&  item.type == 'hello' && hotMessageList.length > 0)}" > -->
			<image class="image" src="/static/img/robot.png" mode=""></image> 
			<view class="doublec">
				<text class="" style="color: black;font-size: 20rpx;padding: 10rpx;">热门问题:</text>
				 <uni-list  >
					<uni-list-item v-for="(m , i) in hotMessageList" class="list-item"  :key="i" :showArrow="true" :title="m.msgTitle" :clickable="false"  link="navigateTo"
						 @tap="sendHotMessage(m.msgTitle,i)"  :customStyle="{titleFontSize:'18rpx',titleFontColor:'#787878'}"
					 ></uni-list-item>
				</uni-list> 
				<text class="load-more"  v-if="hotMessageList != undefined && hotMessageList.length >= 5" @tap="loadMoreHotMessage()">点击查看更多</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			hotMessageList :{
				type:Object,
				require:true,
				default:{}
			}
		},
		data() {
			return {
				user:""
				
			}
		},
		computed(){
			this.user = uni.getStorageSync('userName')
		},
		methods: {
			sendHotMessage(message,hotMsgIndex){
				uni.$emit("sendMessageMonitor",{
					message:message,
					addMessage:true,
					index:null, 
					type:'4',
					commentId:null,
					hotMsgIndex:hotMsgIndex
				}) 
				//记录点击次数
				uni.$api.addHotMessageViewNum({
					 messageId : this.hotMessageList[hotMsgIndex].id
				});
			},
			loadMoreHotMessage(casePic){//查看热门消息点击案例之后显示图片信息
				uni.navigateTo({
					url:'/pages/robot/hotMessageLoadMore'
				})
			},
		}
	}
</script>

<style lang="scss">
	.robotMessage {
		display: flex;
		align-items: flex-start;
		flex-direction: row;
		justify-content: flex-start;
		
		
		.image {
			width: 59rpx;
			height: 50rpx;
			margin: 0 14rpx 0 0;
		}
		
	}
	.doublec {
		margin: 0;
		border-radius: 14rpx;
		background-color: white;
		border: 2rpx solid rgba(187, 187, 187, 0.5294117647);
		padding: 10 30rpx;
		margin-bottom: 30rpx;
		max-width: 600rpx;
		// max-width: 600rpx;
		/* overflow: hidden; */

		.left-message {
			font-size: 18rpx;
			font-family: AppleColorEmoji;
			color: #000;
			white-space: nowrap;
			text-overflow: ellipsis;
			max-width: 500rpx;
			margin: 0;
			border-radius: 14rpx;
			/* overflow: hidden; */
		}
	}
	
	.load-more{
		font-size: 16rpx;
		color: '#c6c6c6';
		text-align: center;
		padding: 10px 0px;
	}
</style>